<template>
    <div>
        <div class="page-nav" ref="page">
            <div id="nav-title" v-for="(item,index) in headlist" :key="index" @click="toTarget(index)"
                :class="currentIndex==index?'active':''">
                <span>{{item}}</span>
            </div>
            <!-- <div class="nav-title" @click="toTarget('#record')">
                <span>出价记录</span>
            </div>
            <div class="nav-title" @click="toTarget('#bid')">
                <span>我要出价</span>
            </div>
            <div class="nav-title" @click="toTarget('#browse')">
                <span>最近浏览</span>
            </div> -->
            <div id="nav-title" style="float:right">
                <span>微信参拍/分享</span>
            </div>
        </div>
        <div class="operation_box">
            <div class="auction_info" ref="index0">
                <div class="auction_title">
                    <h3>拍品详情</h3>
                </div>

                <div class="auction_info_con">
                    <div class="auction_list_box clearfix">
                        <div class="auction_list">拍品分类:
                            <a href="/item/minguo/1/" target="_blank"> 民国旧书</a>
                            <span style="color: #999999;">&gt;</span>
                            <a href="/item/minguo-wenxue/1/" target="_blank"> 文学</a>
                        </div>
                        <div class="auction_list">作者: 不详</div>
                        <div class="auction_list">出版社: 不详</div>
                        <div class="auction_list">出版时间: 不详</div>
                        <div class="auction_list">装帧: 软精装</div>
                        <div class="auction_list">开本: 其他</div>
                        <div class="auction_list">品相: 七品</div>
                    </div>
                    <div class="auction_list_box" style="margin-bottom: 12px;">品相描述: 书脊有破损<br>自然陈旧 馆藏书，民国书中存在书口折角 破损 小撕口
                        水渍
                        黄斑 纸张发脆均属正常现象，品如图瑕疵如有描述不到之处，详请见图。</div>
                    <div class="border_dashed"></div>
                    <div class="auction_list_box" style="margin-top: 8px;margin-bottom: 12px;">详情描述:
                        <br>--------------------------<br>参拍提醒：孔网代买代卖中心线上专场拍卖“买家佣金比例”自2022年6月1日起调整至8.5％，参拍冻结保证金和违约赔付按照8.5%的比例执行，如参拍成功冻结保证金为：8.5%*3=17%。感谢各位朋友长久以来对我们的鼓励和支持，我们将不断努力为各位藏家提供更丰富的拍品和更优质的服务。<br>————<br>参拍须知：孔网代买代卖中心线上拍卖拍品均为代售，拍品仅以最终参拍价交割，谢绝还价。我们的专场拍卖有最长一周的预展时间，如果您对我们的拍品有任何异议，均应在拍品落槌前工作时间内咨询解决。竞买人竞得拍品后，则视其为完全认可拍卖品现状，望各位谨慎参拍。
                    </div>
                </div>
            </div>
            <div class="auction_info" ref="index1">
                <RecordTable ></RecordTable>
            </div>
            <!-- <div class="auction_info" ref="index2">
                <div class="auction_title" style="position:relative">
                    <h3 style="float:left">出价记录</h3>
                    <div style="float:right ;font-size: 14px;">查看所有出价记录 ></div>
                </div>
                <div class=".record_list_box">
                    <div class="tHeader">
                        <table>
                            <tr>
                                <th class="th th1">买家</th>
                                <th class="th ">所出价格</th>
                                <th class="th th3">出价时间</th>
                                <th class="th ">状态</th>
                            </tr>
                            <tr>
                                <td>买家保留</td>
                                <td>4620元</td>
                                <td>2022-09-25 20:40:40</td>
                                <td>领先者(保留)</td>
                            </tr>
                            <tr class="out">
                                <td>枇杷片</td>
                                <td>4620元</td>
                                <td>2022-09-25 20:40:40</td>
                                <td>淘汰</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="auction_info">
                <div class="auction_title" style="position:relative">
                    <h3 style="float:left">我要出价</h3>
                    <div style="float:left; font-size: 14px;">根据本网所售商品的特殊性及古旧书行业的具体情况，网站不支持7天内无理由退货。
                        <a href="">《孔网拍卖参拍须知》</a>
                    </div>
                </div>

                <div class=".record_list_box">
                    <div class="bidEnd">
                        <span style="color: #999999;">已结束，拍品流拍，未达保留价</span>
                    </div>
                </div>
            </div> -->
            <div class="auction_info" ref="index2">
                <div class="auction_title" style="position:relative">
                    <h3 style="float:left">我要出价</h3>
                    <div style="float:left; font-size: 14px;">根据本网所售商品的特殊性及古旧书行业的具体情况，网站不支持7天内无理由退货。
                        <a href="">《孔网拍卖参拍须知》</a>
                    </div>
                </div>

                <div class=".record_list_box">
                    <div class="loginBid">
                        <div class="bid_title">
                            <ul class="deatil_Bid">
                                <li>
                                    当前价格
                                    <i class="gray new_price">￥80</i>
                                    <i class="red">刷新价格</i>
                                </li>
                                <li>
                                    起拍价
                                    <i class="gray new_price">￥50</i>
                                </li>
                                <li>
                                    最小加价
                                    <i class="gray new_price">￥10</i>
                                </li>
                                <li style="clear: both;margin:0;padding:0;"></li>
                                <li>
                                    可用保证金
                                    <i class="gray new_price">￥0</i>
                                </li>
                                <li>
                                    当前价格
                                    <i class="gray new_price">￥0</i>
                                    <i class="red"><span><a href="缴纳保证金地址">缴纳保证金></a></span></i>
                                </li>
                                <li style="clear: both;margin:0;padding:0;"></li>
                            </ul>
                            <div style="float:left; font-size: 14px;">
                                <div class="bid_text" style="padding-left: 40px;color: #888888;font-size: 12px;"><img
                                        style="width: 12px;margin-right: 4px;position: relative;top:-1px;"
                                        src="https://static.kongfz.com/pm-web/static/img/tip@2x.ee5ac772.png"
                                        alt="">当前拍品买家佣金5%，竞拍保证金10.5%，出价时将冻结15.5% </div>
                            </div>
                        </div>
                        <div class="Bid_table">
                            <div class="bidAll">
                                <div class="check">常规竞买</div>
                                <div class="check">代理竞买</div>
                                <div class="bid_help_link check">
                                    (什么叫)
                                    <a href="">常规竞买, 代理竞买</a>
                                </div>
                            </div>
                            <div class="auction_box">
                                <div class="auction_box_name">您的竞买价:</div>
                                <div class="auction_box_m">
                                    <!-- 减价 -->
                                    <div class="reduce gray">
                                        <img class="black"
                                            src="https://static.kongfz.com/pm-web/static/img/reduce.d8815711.png"
                                            alt="">
                                        <!-- <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/reduce_gray.4c16fa80.png"
                                            alt=""> -->
                                    </div>
                                    <div class="entry">
                                        <input type="text" valu="100">
                                        <!-- 选择框 -->
                                        <ul class="selectCon" style="display: none;">
                                            <!-- selectCon_tmpl-->
                                            <li class="select_li">110</li>
                                            <li class="select_li">120</li>
                                            <li class="select_li">130</li>
                                            <li class="select_li">140</li>
                                            <li class="select_li">150</li>
                                            <li class="select_li">160</li>
                                            <li class="select_li">170</li>
                                            <li class="select_li">180</li>
                                            <li class="select_li">190</li>
                                        </ul>
                                    </div>
                                    <!-- 加价 -->
                                    <div class="increase">
                                        <img class="black"
                                            src="https://static.kongfz.com/pm-web/static/img/increase.2529398d.png"
                                            alt="">
                                        <!-- <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/increase_gray.f850346b.png"
                                            alt=""> -->
                                    </div>
                                </div>
                                <div class="putPrice red">
                                    <i class="button-text">竞价购买</i>
                                </div>
                                <div class="put_tip">只输入数字整数即可</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="auction_info" ref="index3">
                <!-- <div class="auction_title" style="position:relative">
                    <h3 style="float:left">最近浏览</h3>
                </div>
                <div class="record_list_box">
                    <div class="storey_list" v-for="item in 5">
                        <div class="storey_item" style="height: 274px;">
                            <a href="" style="float:left">
                                <div class="storey_list_img">
                                    <img src="https://www.kfzimg.com/sw/kfz-cos/pmimg/6973396/18542fc9c5c9da01_n.jpg"
                                        alt="">
                                </div>
                                <div class="storey_list_title">
                                    【清光绪拾柒年 辛邓仲 友雲峰
                                    手抄订】【验方新编原刊信点牛痘说....等等.】4厚册全。是书；内有版画，纸张薄如蝉翼、版面整洁字大醒目、内附图解便后人易学易懂。望学者宝之。行书娴熟流畅，均非一般俗手可谓。
                                    阅着朱墨批点 非是一般庸手可为。品相如图。
                                </div>
                            </a>
                        </div>
                         <a href="">
                        <div class="storey_list_img">
                            <img src="https://www.kfzimg.com/sw/kfz-cos/pmimg/4307920/c3fe369cb905fba0_n.jpg" alt="">
                        </div>
                        <div class="storey_list_title">
                            【清光绪拾柒年 辛邓仲 友雲峰
                            手抄订】【验方新编原刊信点牛痘说....等等.】4厚册全。是书；内有版画，纸张薄如蝉翼、版面整洁字大醒目、内附图解便后人易学易懂。望学者宝之。行书娴熟流畅，均非一般俗手可谓。
                            阅着朱墨批点 非是一般庸手可为。品相如图。
                        </div>
                        <div class="storey_list_price">
                            <span>3566元</span>起拍价
                        </div>
                        <div class="lastTime ">剩余 2天23时25分</div>
                    </a>
                    </div>
                </div> -->
                <HistoryData></HistoryData>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import RecordTable from './RecordTable.vue'
import HistoryData from '@/components/HistoryData.vue';
export default defineComponent({
    props: ['req'],
    data() {
        return {
            currentIndex: 0,
            headlist: ['拍品详情', '出价记录', '我要出价', '最近浏览']

        }

    },
    components: {
        RecordTable, 
        HistoryData
    },
    methods: {
        toTarget(index: any) {
            this.currentIndex = index;
            console.log(index);
            let to = this.$refs["index" + index] as Element;
            console.log(to);
            
            to.scrollIntoView({
                behavior: "smooth"
            });
        },


        /* goAnchor(selector:any) {
                var anchor = this.$el.querySelector(selector);//获取元素
                let total;
                let disFixed =document.getElementsByClassName("vux-fixed")[0];
                if(disFixed){
                    total = anchor.offsetTop-40;
                }else{
                    total = anchor.offsetTop-80;
                }
                let distance = document.documentElement.scrollTop || document.body.scrollTop;
                // 计算每一小段的距离
                let step = total/6;
                (function smoothDown () {
                    if (distance < total) {
                        distance += step;
                        // 移动一小段
                        document.body.scrollTop = distance;
                        document.documentElement.scrollTop = distance;
                        // 设定每一次跳动的时间间隔为10ms
                        setTimeout(smoothDown, 10)
                    } else {
                        // 限制滚动停止时的距离
                        document.body.scrollTop = total;
                        document.documentElement.scrollTop = total
                    }
                })()
       },
       **/ 
   
    },

    

   

}
)
</script>

<style lang="scss" scoped>
.red {
    color: #8c222c;
    font-weight: 400;
    font-size: 12px;
}

.page-nav {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    z-index: 100;
}

#nav-title {
    float: left;
    width: 136px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-right: 1px solid rgb(237, 235, 235);
}

.active {
    background: #993d43;
    color: #fff !important;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}



.operation_box {
    width: 1200px;
    margin: 0 auto;
}

.auction_info {
    width: 1200px;
    float: right;
    border: 1px solid #e9e9e9;
    margin: 20px auto 0;

    .auction_title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #404040;
        font-weight: 500;
        border-bottom: 1px solid #e9e9e9;

        h3 {
            padding-left: 40px;
            margin: 0px;
        }
    }

    .auction_info_con {
        width: 1120px;
        margin: 0 auto;
        padding-top: 18px;
        padding-bottom: 8px;

        .auction_list {
            margin-bottom: 12px;
            line-height: 18px;
        }

        .auction_list_box {
            width: 100%;
            line-height: 24px;
            font-size: 14px;
            color: #666;
        }
    }

}

table {
    width: 100%;

    .th {
        height: 40px;
        line-height: 40px;
        width: 25%;
        text-align: center;
    }

    .th1 {
        width: 20%;
    }

    .th3 {
        width: 30%;
    }

    tr td {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

}

.record_list_box {
    display: flex;
    justify-content: space-between;
}

.storey_list {
    width: 100%;
    padding-top: 20px;
    word-break: break-all;
    text-align: justify;
    text-justify: inter-ideograph;

    .storey_list_img {
        width: 208px;
        height: 208px;
        background: #f6f6f6;
        text-align: center;
        line-height: 208px;
        font-size: 0;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
        }
    }

    .storey_list_title {
        width: 192px;
        font-size: 14px;
        color: #333;
        line-height: 22px;
        margin: 4px auto 0;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .storey_list_price {
        width: 192px;
        height: 26px;
        line-height: 26px;
        font-size: 18px;
        color: #333;
        margin: 8px auto 0;
        font-weight: 700;
    }

    .lastTime {
        height: 16px;
        line-height: 16px;
        width: 192px;
        margin: 8px auto 0;
        font-size: 12px;
        color: #888;
    }


}

.bid_title {
    height: 90px;
    width: 100%;
    margin: 0px 40px;
}

.deatil_Bid li {
    font-size: 16px;
    color: #888;
    float: left;
    margin-bottom: 16px;
    margin-right: 70px;
}

.bidAll {
    display: flex;
    width: 1120px;
    background: #fafafa;
    border: 1px solid #eaeaea;
    margin: 58px auto 0;
    justify-content: center;

    .check {
        width: 302px;
        height: 44px;
        background: #e6f7ff;
        border: 1px solid #98b6df;
        border-bottom: 0;
        font-weight: 500;
        z-index: 2;
        left: 299px;
        text-align: center;
        line-height: 44px;
    }

    .bid_help_link {
        width: 46%;
    }
}


.auction_box {
    line-height: 50px;
    display: flex;
    padding-left: 159px;
    padding-top: 45px;
    padding-bottom: 45px;
    justify-content: flex-start;
    border: 1px solid #eaeaea;
    margin: 0px 41px;

    .reduce {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
    }


    .auction_box_m {
        display: flex;
        justify-content: center;
    }

    .entry {
        width: 252px;
        height: 50px;
        text-align: center;
        margin: 0 9px;

        input {
            width: 230px;
            height: 48px;
            text-align: center;
            font-size: 24px;
            color: #333;
            background: #fff;
            border: 1px solid #c7c7c7;
            border-radius: 4px;
            font-weight: 600;
            padding: 0 10px;
        }
    }

    .increase {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 57px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        cursor: pointer;
        background: #fff;
    }

    .putPrice {
        width: 130px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        color: #fff;
        background: #b8333c;
        border-radius: 4px;
        margin-top: 1px;
        margin-left: 30px;
        cursor: pointer;
    }

    .put_tip {
        height: 50px;
        line-height: 50px;
        margin-left: 16px;
        font-size: 14px;
        color: #888;
    }
}

.selectCon {
    display: none;
    // position: relative;
    z-index: 999;
    background-color: red;
}
</style>